Перейти к основному содержимому

Переменные в CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Переменные в CSS​

Переменные в CSS — это именованные значения, которые хранят информацию для многократного использования в стилях веб-страницы. Эти величины обеспечивают централизованное управление стилями и сокращают объём кода.

Имя переменной начинается с префикса -- (два дефиса). Это обозначение указывает на то, что значение относится к категории пользовательских свойств CSS.

Основные цели использования переменных​

ЦелиОписание
Многократное использованиеОдно значение используется во множестве мест документа
Сокращение кодаУменьшение дублирования одинаковых значений
Централизованное управлениеИзменение значения в одном месте влияет на всё приложение
Динамическое изменениеВозможность обновления значений через JavaScript
СтруктурированиеИменование повышает читаемость кода

Отличия от других языков программирования​

CSS-переменные работают непосредственно в браузере в процессе рендеринга страницы. Эта особенность отличает их от переменных препроцессоров.

Особенности работы CSS-переменных:

  • Значения вычисляются браузером в рантайме, а не на этапе компиляции
  • Значения можно изменять динамически через JavaScript
  • Область видимости работает по принципу каскада CSS
  • Поддержка наследования между родительскими и дочерними элементами
  • Значения хранятся в браузере без необходимости сборки проекта

Сравнительная таблица​

ХарактеристикаCSS-переменныеSASS/LESS переменные
Время обработкиРантайм (в браузере)Дизайтайм (на сервере)
Доступность для JSПолная поддержкаНе поддерживается
Возможность изменения темПрямая смена значенийТребует полной пересборки
Формат исходного кодаБез дополнительных инструментовТребуется сборщик
Поддержка браузеровВсе современные браузерыТребует трансляции

Синтаксис объявления переменных​

Префикс -- обязателен при создании имени переменной. Имя должно следовать правилам идентификации в CSS.

Правила именования​

Имена переменных могут содержать следующие символы:

  • Латинские буквы A-Z, a-z
  • Цифры 0-9 (но не в начале имени)
  • Дефис -
  • Подчёркивание _
  • Знак доллара $ (рекомендуется избегать)

Имена чувствительны к регистру. Различие между --Color и --color создаёт две разные переменные.

Неправильные примеры​

:root {
  --incorrect name: #ff0000;    /* Пробелы запрещены */
  --12primary: #000000;         /* Нельзя начинать с цифры */
  --invalid@sym!: #000;         /* Запрещённые символы */
}

Правильные примеры​

:root {
  --main-color: #235ad1;
  --text-font-family: Arial, sans-serif;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

Функция var()​

Функция var() извлекает значение переменной в том месте, где она требуется.

Базовый синтаксис​

.property: var(--variable-name);

Использование в разных свойствах​

.element {
  color: var(--text-color);
  background-color: var(--bg-primary);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--radius-small);
}

Резервные значения​

Резервное значение применяется при отсутствии переменной.

.section-title {
  color: var(--title-color, #222222);
}

.icon-box {
  background-color: var(--icon-bg, transparent);
  width: var(--icon-size, 32px);
}

Если переменной --title-color не существует, браузер использует значение #222222.

Вложенные резервные значения​

.card-header {
  color: var(--heading-color, var(--default-color, #333333));
}

.button {
  background-color: var(--btn-color, var(--brand-color, #007bff));
}

При отсутствии обоих переменных применяется последнее значение.

Области видимости​

Область видимости определяет место, где переменную можно использовать.

Глобальные переменные​

Переменные, объявленные внутри селектора :root, доступны во всём документе.

:root {
  --global-primary: #235ad1;
  --global-spacing: 1rem;
  --global-font-stack: 'Roboto', sans-serif;
}

body {
  font-family: var(--global-font-stack);
  margin: var(--global-spacing);
}

.sidebar {
  background-color: var(--global-primary);
}

Селектор :root соответствует элементу <html>.

Локальные переменные​

Переменные, объявленные на конкретных элементах, действуют только внутри этих элементов и их потомков.

.component-a {
  --local-theme: #f5a623;
  color: var(--local-theme);
}

.content-wrapper {
  --local-theme: #4facfe;
  color: var(--local-theme);
}

Элемент .content-wrapper использует свою локальную переменную, игнорируя глобальное значение.

Пример иерархии видимости​

/* Уровень 1: Глобальный */
:root {
  --theme-color: #235ad1;
  --spacing-base: 8px;
}

/* Уровень 2: Компонентный */
.panel {
  --theme-color: #d12374;
  padding: var(--spacing-base);
  color: var(--theme-color);
}

/* Уровень 3: Вложенный компонент */
.panel--feature {
  --theme-color: #00c9a7;
}

.feature-content {
  color: var(--theme-color);
}

Изменение происходит в порядке возрастания специфичности.

Наследование и переопределение​

CSS-переменные поддерживают механизм наследования. Потомки получают значения от родительских элементов.

Принцип наследования​

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  --size: 20px;
}

.child {
  width: var(--size);
  height: var(--size);
}

Элемент .child получает доступ к переменной --size, объявленной в .parent.

Переопределение переменных​

Дочерние элементы могут заменять унаследованные значения своими определениями.

.actions {
  --item-size: 50px;
  display: flex;
  gap: calc(var(--item-size) / 2);
}

.actions__item {
  width: var(--item-size);
  height: var(--item-size);
}

.actions--large {
  --item-size: 80px;
}

Изменение переменной --item-size в классе .actions--large автоматически меняет размеры всех вложенных элементов.

Каскадное переопределение​

:root {
  --primary: #007bff;
  --secondary: #6c757d;
}

.btn {
  --primary: #28a745;
  background-color: var(--primary);
}

.btn-secondary {
  background-color: var(--secondary);
}

Кнопка .btn использует собственное значение --primary. Кнопка .btn-secondary наследует глобальное --secondary.

Практические применения​

Управление цветовой схемой​

Централизованное хранение цветов упрощает изменение темы всего приложения.

:root {
  --main-text-color: #2c3e50;
  --link-color: #3498db;
  --bg-body: #ffffff;
  --bg-card: #f8f9fa;
  --border-color: #dee2e6;
}

/* Светлая тема */
.light-theme {
  --main-text-color: #2c3e50;
  --link-color: #3498db;
  --bg-body: #ffffff;
  --bg-card: #f8f9fa;
}

/* Тёмная тема */
.dark-theme {
  --main-text-color: #ecf0f1;
  --link-color: #5dade2;
  --bg-body: #2c3e50;
  --bg-card: #34495e;
}

body {
  background-color: var(--bg-body);
  color: var(--main-text-color);
}

a {
  color: var(--link-color);
}

Изменение одной переменной обновляет цвета по всей странице.

Медиазапросы и адаптивность​

Значения переменных меняют внутри медиазапросов.

:root {
  --gutter: 16px;
  --container-width: 1200px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-width: 1400px;
  }
}

.container {
  max-width: var(--container-width);
  padding: 0 var(--gutter);
}

Хранение сложных структур​

Градиенты​

:root {
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-angle: 135deg;
}

.card {
  background: var(--gradient-primary);
}

/* Частичная модификация */
.hero {
  --gradient-angle: 90deg;
  background: linear-gradient(var(--gradient-angle), #667eea, #764ba2);
}

URL фоновых изображений​

:root {
  --logo-url: url('/images/logo.svg');
  --background-image: url('/images/pattern.png');
}

.header {
  background: var(--logo-url) no-repeat left center;
}

.page {
  background: var(--background-image) repeat fixed;
}

Комплексные значения фона​

:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --button-border: 1px solid #ddd;
}

.ui-button {
  box-shadow: var(--card-shadow);
  border: var(--button-border);
}

Работа с CSS Grid и Flexbox​

.grid-container {
  --column-width: 250px;
  --gap-size: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
  gap: var(--gap-size);
}

.grid--wide {
  --column-width: 400px;
}

.grid--narrow {
  --column-width: 180px;
  --gap-size: 8px;
}

Вычисления со значениями переменных​

Функция calc() поддерживает использование переменных в расчётах.

.avatar {
  --base-size: 40px;
  --multiplier: 1.5;
  
  width: calc(var(--base-size) * var(--multiplier));
  height: calc(var(--base-size) * var(--multiplier));
}

.prose {
  --line-height: 1.6;
  --font-size-base: 16px;
  
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

Изменение значений через JavaScript​

JavaScript может изменять переменные в реальном времени.

// Установка переменной
document.documentElement.style.setProperty('--accent-color', '#ff6b6b');

// Чтение значения
const currentColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--accent-color')
  .trim();

// Удаление переменной
document.documentElement.style.removeProperty('--accent-color');

HTML атрибут style также принимает переменные:

<div class="grid" style="--item-width: 300px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Специфические особенности​

Анимация и переменные​

CSS-переменные не поддерживают плавную анимацию внутри правил @keyframes.

.box {
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}

Перемещение происходит рывками. Для плавной анимации используйте стандартные CSS-свойства.

Регистрация свойств @property​

Правило @property позволяет регистрировать тип данных переменной для поддержки анимации.

@property --offset {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

.box {
  --offset: 0;
  transform: translateX(var(--offset));
  animation: animateMove 1s infinite alternate;
}

@keyframes animateMove {
  from {
    --offset: 0;
  }
  to {
    --offset: 100px;
  }
}

Данный функционал поддерживается современными браузерами Chromium.

Инструменты разработчика​

Браузерные инструменты предоставляют возможности для работы с переменными.

Chrome DevTools​

  • Просмотр значения переменной при наведении курсора
  • Автозавершение имён переменных
  • Возможность отключения отдельных переменных
  • Отображение вычисляемых значений

Firefox Developer Tools​

  • Поддержка автозавершения
  • Отображение вложенных резервных значений
  • Редактирование значений на лету

Safari Web Inspector​

  • Просложение значений с помощью специального индикатора
  • Отображение каскада переменных

Лучшие практики​

Конвенции именования​

Используйте осмысленные имена, отражающие назначение значения.

КатегорияПрефиксПример
Цветаcolor---color-primary
Размерыsize---size-icon-large
Отступыspace- или gap---space-medium
Шрифтыfont---font-size-base
Темыtheme---theme-dark-bg

Группировка переменных​

Разделяйте переменные по категориям.

/* Цветовая схема */
:root {
  --color-text-main: #212121;
  --color-text-muted: #757575;
  --color-accent: #2196F3;
  --color-background: #FAFAFA;
}

/* Размеры */
:root {
  --size-xs: 4px;
  --size-sm: 8px;
  --size-md: 16px;
  --size-lg: 32px;
  --size-xl: 64px;
}

/* Шрифты */
:root {
  --font-stack-sans: system-ui, -apple-system, sans-serif;
  --font-stack-mono: SFMono-Regular, Consolas, monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
}

Работа с несколькими значениями​

Некоторые значения содержат несколько компонентов.

:root {
  --rgb-primary: 33, 150, 243;
}

.element {
  color: rgb(var(--rgb-primary));
}

Валидация проверяет структуру значения перед применением.

Обработка ошибок​

Браузер игнорирует значение, если оно несовместимо со свойством.

:root {
  --wrong-value: invalid;
}

.text {
  color: var(--wrong-value);
}

/* Свойство остаётся без изменения */

Установка резервных значений предотвращает потерю стилей.

.text {
  color: var(--wrong-value, #000000);
}

Браузер проверит корректность переменной. При ошибке применится значение #000000.

Встроенные стили​

Атрибут style позволяет объявлять переменные прямо в разметке HTML.

<div class="avatar-list" style="--item-count: 5;">
  <img src="user1.jpg">
  <img src="user2.jpg">
  <img src="user3.jpg">
  <img src="user4.jpg">
  <img src="user5.jpg">
</div>
.avatar-list {
  --row-size: calc(var(--item-count) / 2);
  display: grid;
  grid-template-columns: repeat(var(--row-size), 1fr);
}

Это удобно для динамических компонентов.

Освоение главы0%